<template>
  <view class="custom-comment-component">
    <view class="comment-header">
      <text class="title">评论 {{ formatBigNum(commentTotal) }}</text>
      <view class="sort">
        <text :class="sortType === 1 ? 'active' : ''" @click="sortChange(1)">
          最热
        </text>
        <text :class="sortType === 2 ? 'active' : ''" @click="sortChange(2)">
          最新
        </text>
      </view>
    </view>
    <view class="comment-list">
      <CommentItem
        v-for="(item, index) in commentList"
        :key="item.id"
        :data="item"
        :has-operator="true"
        @commentGoodClick="onCommentGoodClick(item, index)"
        @deleteComment="onDeleteComment(index)"
        @onReply="onReply(item, index)"
      />
      <template v-if="commentList.length > 0">
        <TLoading
          v-if="hasMore && loadMoreLoading"
          type="horizontal"
          text="正在加载…"
        />
        <view v-else class="hasmore">
          <text>没有更多了...</text>
        </view>
      </template>
      <t-status v-else :show-btn="false" content="暂无评论" />
    </view>
    <view class="discus-bar-wrapper">
      <view
        class="discus-bar"
        :style="inputHasFocus ? 'align-items: flex-end' : 'align-items: center'"
      >
        <textarea
          v-model="inputContent"
          :focus="inputHasFocus"
          placeholder-class="input-placeholder"
          :class="
            inputHasFocus || publishCommentLoading
              ? 'input focus'
              : popupVisible
              ? 'input big'
              : 'input'
          "
          type="text"
          :cursor-spacing="20"
          :cursor="100"
          :placeholder="inputPlaceholder"
          :maxlength="140"
          :auto-height="true"
          :show-confirm-bar="false"
          :fixed="true"
          @focus="changeInputFocus(true)"
          @blur="changeInputFocus(false)"
          @input="commentContentChange"
        />
        <template v-if="!inputHasFocus && !publishCommentLoading">
          <view class="info-item like" @click="onGoodClick">
            <image
              v-if="isLike"
              src="../../static/images/icon-like-active.svg"
            />
            <image v-else src="../../static/images/icon-like-gray.svg" />
            <text :class="isLike ? 'value red' : 'value'">
              {{ formatBigNum(likeCount) }}
            </text>
          </view>
          <div v-if="!popupVisible" class="info-item" @click="onDiscusClick">
            <image src="../../static/images/icon-discus.svg" />
            <text class="value">{{ formatBigNum(commentTotal) }}</text>
          </div>
          <button
            :open-type="shareButtonType"
            class="info-item"
            @click="onShareClick"
          >
            <image src="../../static/images/icon-share-arrow.svg" />
            <text class="value">分享</text>
          </button>
        </template>
        <view
          v-if="inputHasFocus && inputContent.length > 0"
          class="send-btn disabled"
          @click="publishAction"
        >
          发送
        </view>
      </view>
    </view>
    <ModalAlert
      :visible="modalVisible"
      confirm-text="确定"
      cancel-text="取消"
      cancel-text-color="#000"
      confirm-text-color="#3F60FC"
      content="确定删除此评论？"
      @onConfirm="handleConfirm"
      @onCancel="handleCancel"
    />

    <ModalAlert
      :visible="replyModalVisible"
      confirm-text="确定"
      cancel-text="取消"
      cancel-text-color="#000"
      confirm-text-color="#3F60FC"
      content="确定删除此回复？"
      @onConfirm="handleReplyConfirm"
      @onCancel="handleReplyCancel"
    />

    <v-popup :visible="popupVisible" @onClose="onPopupClose">
      <view class="reply-popup">
        <view class="comment-drawer-header">
          <text>{{ replyItem.commentReplyCount }}条回复</text>
          <view class="close-btn" @click="onPopupClose">
            <image src="../../static/images/icon-close.png" />
          </view>
        </view>
        <scroll-view
          :scroll-y="true"
          class="reply-list"
          :scroll-with-animation="false"
          :scroll-into-view="intoViewId"
          @scrolltolower="scrollToLower"
        >
          <view id="comment-drawer-header" style="height: 0px" />
          <CommentItem
            :has-operator="false"
            :data="replyItem"
            @commentGoodClick="onCommentReplyGoodClick"
          />
          <view class="comment-reply-item-line" />
          <text class="all-reply-title">全部回复</text>
          <CommentItem
            v-for="(replyItem, index) in replyList"
            :key="replyItem.id"
            :data="replyItem"
            :has-operator="true"
            @onReply="onCommentItemReply(replyItem)"
            @commentGoodClick="onCommentReplyListGoodClick(replyItem, index)"
            @deleteComment="onDeleteReply(index)"
          />
          <template v-if="replyList.length > 0">
            <view v-if="replyHasMore && replyLoadMoreLoading"
              ><TLoading type="horizontal" text="正在加载…"
            /></view>
            <view v-else class="hasmore">
              <text>没有更多了...</text>
            </view>
          </template>
          <t-status v-else :show-btn="false" content="暂无回复" />
          <view style="height: 120px" />
        </scroll-view>
      </view>
    </v-popup>
  </view>
</template>

<script>
export default {
  props: {
    articleId: {
      type: number,
      default: 0,
    },
    isLike: {
      type: boolean,
      default: false
    },
    shareButtonType: {
      type: string,
      default: ''
    },
  },
  data() {
    return {
      
    };
  },
  onLoad() {},
  methods: {},
  mounted() {},
};
</script>

<style lang="less">
@import "./index.less";
</style>
